<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/9/23
  Time: 21:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        #div1 {
            text-align: center;
            width: 500px;
            height: 400px;
            background-color: white;
        }

        #title {
            padding-bottom: 30px;
            color: #1e9fff;

        }

        .input1 {
            background-color: rgba(115, 189, 236, 0.78);
        }

        .icon {
            font-size: 30px;
            font-weight: bold;
            color: #1e9fff;
        }
    </style>
</head>
<body style="align-items: center;display: flex;">
<div id="div1" class="layui-main">
    <h1 id="title">注册账号</h1>
    <hr>
    <br>
    <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/user/register" method="post">

        <div class="layui-form-item" style="margin-left: 50px">
            <label class="layui-form-label"><i class="layui-icon layui-icon-username icon"></i></label>
            <div class="layui-input-inline">
                <input type="text" name="loginName" required lay-verify="required" placeholder="请输入账号"
                       autocomplete="off" class="layui-input input1">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 50px">
            <label class="layui-form-label"><i class="layui-icon layui-icon-user icon"></i></label>
            <div class="layui-input-inline">
                <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input input1">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 50px">
            <label class="layui-form-label"><i class="layui-icon layui-icon-password icon"></i></label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input input1">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 50px">
            <label class="layui-form-label"><i class="layui-icon layui-icon-ok-circle icon"></i></label>
            <div class="layui-input-inline">
                <input type="password" name="okPassword" required lay-verify="required|confirmPass" placeholder="请再次输入密码"
                       autocomplete="off" class="layui-input input1">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 50px">
            <label class="layui-form-label"><i class="layui-icon layui-icon-vercode icon"></i> </label>
            <div class="layui-input-inline">
                <input type="text" id="checkCode" name="checkCode" required lay-verify="required" placeholder="验证码"
                       autocomplete="off" class="layui-input input1">
            </div>
            <div class="layui-form-mid" style="padding: 0!important;">
                <img id="vercode" src="${pageContext.request.contextPath}/checkCode" alt="">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="loginInfo">注册</button>
                </div>
            </div>
        </div>

    </form>
</div>

</body>
<script>
    //Demo
    layui.use(['form','jquery','layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        var info = "${sessionScope.info}";
        ${sessionScope.remove("info")};
        if (info != ""){
            layer.msg(info);
        }
        //提交
        form.on('submit(loginInfo)', function (data) {
            $.ajax({
                type: 'post',
                async: false,
                url: '${pageContext.request.contextPath}/user/register',
                data:data.field ,
                success:function (rs) {
                    if(rs == '1'){
                        layer.msg("验证码有误",{icon:2});
                    }else if(rs == '2'){
                        layer.msg("注册成功,2秒后跳转到登录页面",{time:2000},function () {
                            // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.closeAll(); //再执行关闭
                            parent.location.reload();
                        });

                    }else{
                        layer.msg("用户已经被注册",{icon:2});
                    }
                },
                error:function (rs) {
                    console.log(rs);
                    layer.msg("被拦截了",{icon:2})
                }
            });
            return false;
        });

        //点击刷新验证码
        $("#vercode").click(function () {
            $("#vercode").attr("src","${pageContext.request.contextPath}/checkCode?time=" + new Date().getTime());
        });

        form.verify({
            confirmPass : function(value) {
                if ($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });
    });
</script>
</html>
